<template>
  <div class="app-container">
    <el-card>
      <list
        :results="results"
        @add="add"
        @edit="edit"
        @growth="growth"
        @del="del"
      />
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      title="作物生育期管理"
      :visible.sync="growthDialogVisible"
      width="1036px"
    >
      <growth
        :growthes="growthes"
        @growthSubmit="growthSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import List from './component/list'
import MainForm from './component/main-form'
import Growth from './component/growth'
import CommonMixin from '@/mixin/CommonMixin'
import { getCrops as getAll } from '@/api/mock'
export default {
  components: {
    List,
    MainForm,
    Growth
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      results: [],
      growthDialogVisible: false,
      growthes: []
    }
  },
  methods: {
    getList() {
      getAll().then(res => {
        this.results = res.data
      })
    },
    submit(formData) {
      this.$message.success('成功')
    },
    getOne(row) {
      this.formData = row
      this.dialogVisible = true
    },
    edit(row) {
      this.formData = row
      this.dialogVisible = true
    },
    growth(row) {
      this.growthes = row.growth
      this.crop_id = row.id
      this.growthDialogVisible = true
    },
    growthSubmit(growthes) {
      this.formData = {
        crop_id: this.crop_id,
        growthes: growthes
      }
      console.log(this.formData)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
